<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>z-UI-button</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-tab/css/z-UI.tab.css"/>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="z-UI.js"></script>
    <script type="text/javascript" src="z-UI-tab/js/z-UI.tab.js"></script>
    <style>
		html,body{
            width: 100%;height: 100%;
            margin:0;
        }
    </style>
</head>
<body class="zUI-app">
<div class="zUI-full" style="padding: 20px;overflow-y: auto">
    <span class="zUI-strik">纯色按钮</span>
    <a class="zUI-btn ssm">极小</a>
    <button class="zUI-btn info ssm">极小</button>
    <a class="zUI-btn success">小按钮</a>
    <a class="zUI-btn md danger">中按钮</a>
    <a class="zUI-btn lg warn">大按钮</a>
    <a class="zUI-btn lgg disable" >超大</a><br><br>
    <div class="zUI-card" zUI-folder="show" zUI-card-group="group1" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code1"></pre>
        </div>
    </div>

    <span class="zUI-strik">空心按钮</span>
    <a class="zUI-btn zUI-btn-null success ssm">极小</a>
    <button class="zUI-btn zUI-btn-null info sm">小号</button>
    <button class="zUI-btn zUI-btn-null danger md">中按钮</button>
    <button class="zUI-btn zUI-btn-null warn lg">大按钮</button>
    <button class="zUI-btn zUI-btn-null disable lgg">超大</button><br><br>
    <div class="zUI-card" zUI-folder="hide" zUI-card-group="group1" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code2"></pre>
        </div>
    </div>

    <span class="zUI-strik">图标按钮</span>
    <button class="zUI-btn success ssm"><i class="zUI-icon fa fa-save"></i>极小</button>
    <button class="zUI-btn success"><i class="zUI-icon fa fa-edit"></i>小号</button>
    <button class="zUI-btn md danger"><i class="zUI-icon fa fa-sign-in"></i>中号</button>
    <button class="zUI-btn zUI-btn-null md danger"><i class="zUI-icon fa fa-trash"></i>中号</button>
    <button class="zUI-btn zUI-btn-null md danger"><i class="zUI-icon fa fa-cog"></i>中号</button>
    <button class="zUI-btn zUI-btn-null md danger"><i class="zUI-icon fa fa-plus"></i>中号</button>
    <button class="zUI-btn zUI-btn-null lg warn"><i class="zUI-icon fa fa-envelope"></i>大号</button>
    <button class="zUI-btn zUI-btn-null lgg warn"><i class="zUI-icon fa fa-sign-out"></i>超大</button><br><br>
    <div class="zUI-card" zUI-folder="hide" zUI-card-group="group1" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code3"></pre>
        </div>
    </div>
    <span class="zUI-strik">纯图标按钮</span>
    <a class="zUI-btn circle ssm success"><i class="zUI-icon fa fa-save"></i></a>
    <a class="zUI-btn circle sm info"><i class="zUI-icon fa fa-trash"></i></a>
    <a class="zUI-btn circle info"><i class="zUI-icon fa fa-star"></i></a>
    <a class="zUI-btn circle zUI-btn-null info"><i class="zUI-icon fa fa-envelope"></i></a>
    <button class="zUI-btn circle zUI-btn-null warn"><i class="zUI-icon fa fa-cog"></i></button>
    <a class="zUI-btn circle danger"><i class="zUI-icon fa fa-edit"></i></a>
    <a class="zUI-btn circle zUI-btn-null danger"><i class="zUI-icon fa fa-search"></i></a>
    <br>
    <br>
    <div class="zUI-card" zUI-folder="hide" zUI-card-group="group1" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code4"></pre>
        </div>
    </div>


</div>

</body>

<script>
    $(function () {
        zUI.tab.loadTab({
            elem:'.zUI-bar',
        });
        zUI.tab.loadPanel({
            elem:'.zUI-card'
        });
        zUI.code.render({
            elem:'#code1',
            value: "<a class='zUI-btn ssm'>极小</a>\n" +
                "<button class='zUI-btn info ssm'>极小</button>\n" +
                "<a class='zUI-btn success'>小按钮</a>\n" +
                "<a class='zUI-btn md danger'>中按钮</a>\n" +
                "<a class='zUI-btn lg warn'>大按钮</a>\n" +
                "<a class='zUI-btn lgg disable' >超大</a>"
        });
        zUI.code.render({
            elem:'#code2',
            value: "<a class='zUI-btn zUI-btn-null success ssm'>极小</a>\n" +
                "<button class='zUI-btn zUI-btn-null info sm'>小号</button>\n" +
                "<button class='zUI-btn zUI-btn-null danger md'>中按钮</button>\n" +
                "<button class='zUI-btn zUI-btn-null warn lg'>大按钮</button>\n" +
                "<button class='zUI-btn zUI-btn-null disable lgg'>超大</button>"
        });
        zUI.code.render({
            elem:'#code3',
            value: "<button class='zUI-btn success ssm'><i class='zUI-icon fa fa-save'></i>极小</button>\n" +
                "<button class='zUI-btn success'><i class='zUI-icon fa fa-edit'></i>小号</button>\n" +
                "<button class='zUI-btn md danger'><i class='zUI-icon fa fa-sign-in'></i>中号</button>\n" +
                "<button class='zUI-btn zUI-btn-null md danger'><i class='zUI-icon fa fa-trash'></i>中号</button>\n" +
                "<button class='zUI-btn zUI-btn-null md danger'><i class='zUI-icon fa fa-cog'></i>中号</button>\n" +
                "<button class='zUI-btn zUI-btn-null md danger'><i class='zUI-icon fa fa-plus'></i>中号</button>\n" +
                "<button class='zUI-btn zUI-btn-null lg warn'><i class='zUI-icon fa fa-envelope'></i>大号</button>\n" +
                "<button class='zUI-btn zUI-btn-null lgg warn'><i class='zUI-icon fa fa-sign-out'></i>超大</button>"
        });
        zUI.code.render({
            elem:'#code4',
            value: "<a class='zUI-btn circle ssm success'><i class='zUI-icon fa fa-save'></i></a>\n" +
                "<a class='zUI-btn circle sm info'><i class='zUI-icon fa fa-trash'></i></a>\n" +
                "<a class='zUI-btn circle zUI-btn-null info'><i class='zUI-icon fa fa-envelope'></i></a>\n" +
                "<button class='zUI-btn circle zUI-btn-null warn lg'><i class='zUI-icon fa fa-cog'></i></button>\n" +
                "<a class='zUI-btn circle zUI-btn-null danger lgg'><i class='zUI-icon fa fa-edit'></i></a>"
        });
    })

</script>


</html>